import React, { FC, memo } from 'react';
import styles from './cell.module.less';

interface ICellProps {
  title: React.ReactNode;
  value: React.ReactNode;
  // 默认最后一个没有borderBottom,传这个强制borderBottom
  borderBottom?: boolean;
}

const Cell: FC<ICellProps> = (props) => {
  const { title, value, borderBottom } = props;
  const style = borderBottom ? { borderBottom: 'var(--border)' } : {};
  return (
    <div className={`flex ai-center jc-between ${styles.cell}`} style={style}>
      <div className={styles.title}>{title}</div>
      <div className={`flex ai-center ${styles.value}`}>{value}</div>
    </div>
  );
};

export default memo(Cell);
